import React, { useRef, useEffect, forwardRef, useImperativeHandle, useContext } from 'react';
import { Form, DatePicker, Input, Select, Row } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import EditorDemo from '../Edit/index'
import BraftEditor from 'braft-editor'
import { HomeModalView } from './index';

const { Option } = Select;
export interface AnnouncementProps {
  
}
type FormList = {
  dateTime?: any,
  announcementStatus?: string,
  announcementTitle?: string,
  announcementText?: string,
  announcementContent?: any
}

const formStyleGlobal = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
}

const statusList = [
  {
    id: '1',
    name: '发布'
  },
  {
    id: '2',
    name: '关闭'
  }
]


const NewModalContent = forwardRef((props: AnnouncementProps, _ref) => {
  const EditorDemoDom = useRef();
  const [form] = Form.useForm();
  const contextValue = useContext(HomeModalView);
  const modalFlg = (contextValue as any).modalFlg;
  const modalType = (contextValue as any).modalType;
  let childForm = form;
  
  useImperativeHandle(_ref, () => {
    return {
      childForm,
    }
  })

  useEffect(() => {
    console.log(modalType,'---',modalFlg)
    form.setFieldsValue( modalType === '新增' ? {} : {
      dateTime: dayjs('20150601', 'YYYYMMDD'),
      announcementTitle: '123',
      announcementStatus: '1',
      announcementContent: '测试'
    })
    //富文本初始赋值
    if (EditorDemoDom.current && modalType === '编辑') {
      (EditorDemoDom.current as any).setEditorState(BraftEditor.createEditorState('测试'));
    }
    
  }, [form, modalType, modalFlg])

  //公告状态Option
  const selectList = (list: any) => {
    return list.map((key: any) => { return <Option key={key.id} value={key.id}>{key.name}</Option> });
  }
  //富文本取值
  const callbackEditorItem = (e: any) => form.setFieldValue('announcementContent', e.toHTML());

  const allCont = (type: string) => {
    if (type === '新增' || type === '编辑') {
        return (
          <>
            <Form form={form}>
              <Form.Item<FormList>
                name="dateTime"
                label="发布日期"
                rules={[{ required: true }]}
                {...formStyleGlobal}
              >
                <DatePicker locale={locale} />
              </Form.Item>
              <Form.Item<FormList>
                name="announcementStatus"
                label="公告状态"
                rules={[{ required: true }]}
                {...formStyleGlobal}
              >
                <Select placeholder='请选择公告状态'>
                  {selectList(statusList)}
                </Select>
              </Form.Item>
              <Form.Item<FormList>
                name="announcementTitle"
                label="公告标题"
                rules={[{ required: true }]}
                {...formStyleGlobal}
              >
                <Input placeholder='公告标题'></Input>
              </Form.Item>
              <Form.Item<FormList>
                name="announcementContent"
                label="公告内容"
                rules={[{ required: true }]}
                // getValueFromEvent={normFile}
                style={{ width: '100%' }}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
              >
                <EditorDemo ref={EditorDemoDom} callbackEditorItem={callbackEditorItem}></EditorDemo>
              </Form.Item>
            </Form>
          </>
        )   
    }else{
      return (
        <>
          <Form form={form}>
            <Row>
              <Form.Item<FormList>
                  name="announcementTitle"
                  label="公告标题"
                  {...formStyleGlobal}
                >
                  <Input disabled></Input>
              </Form.Item>
            </Row>
            <Row>
              <Form.Item<FormList>
                  name="announcementTitle"
                  label="发布日期"
                  {...formStyleGlobal}
                >
                  <Input disabled></Input>
              </Form.Item>
              <Form.Item<FormList>
                  name="announcementTitle"
                  label="公告状态"
                  {...formStyleGlobal}
                >
                  <Input disabled></Input>
              </Form.Item>
            </Row>
            <Row>
              <Form.Item<FormList>
                  name="announcementTitle"
                  label="创建时间"
                  {...formStyleGlobal}
                >
                  <Input disabled></Input>
              </Form.Item>
              <Form.Item<FormList>
                  name="announcementTitle"
                  label="创建人"
                  {...formStyleGlobal}
                >
                  <Input disabled></Input>
              </Form.Item>
            </Row>
            <Row>
              <Form.Item<FormList>
                  name="announcementTitle"
                  label="修改时间"
                  {...formStyleGlobal}
                >
                  <Input disabled></Input>
              </Form.Item>
              <Form.Item<FormList>
                  name="announcementTitle"
                  label="修改人"
                  {...formStyleGlobal}
                >
                  <Input disabled></Input>
              </Form.Item>
            </Row>
            <Row>
              <Form.Item<FormList>
                  name="announcementTitle"
                  label="公告内容"
                  {...formStyleGlobal}
                >
                  <Input disabled></Input>
              </Form.Item>
            </Row>
          </Form>
        </>
      )
    }
  }

  return (
    <div className='modalFormStyle'>
      {allCont(modalType)}
    </div>
  )
})

export { NewModalContent };